<template>
  <div class="index-OperationMaintenanceReasons">
    <div class="index-module-header-mini">
      <div class="index-module-title" style="color: white !important;">柱状图</div>
    </div>
    <div ref="chartRef" class="index-OperationMaintenanceReasons-chart"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();

const chartRef = ref(null);
let mapChart = null;

let optionWithData = {
  grid: {
    top: "20%",
    left: "0%",
    right: "0%",
    bottom: "4%",
    containLabel: true,
  },
  legend: {
    orient: "horizontal",
    top: 0,
    left: "center",
    itemWidth: 12,
    itemHeight: 4,
    textStyle: {
      color: "rgba(255,255,255,0.6)",
      fontSize: 10,
    },
  },
  tooltip: {
    show: true,
    trigger: "axis",
    confine: true,
    extraCssText: "padding: 0;border: none;",
    formatter: function (params) {
      let tooltipHtml = `<div class="index-OperationMaintenanceReasons-tooltip">
                      <div class="index-OperationMaintenanceReasons-tooltip-title">${params[0].name}</div>
                      <div class="index-OperationMaintenanceReasons-tooltip-list">
                        <div class="index-OperationMaintenanceReasons-tooltip-list-key">${params[0].marker} ${params[0].seriesName}</div>
                        <div class="index-OperationMaintenanceReasons-tooltip-list-value">${params[0].value}</div>
                      </div>
                      <div class="index-OperationMaintenanceReasons-tooltip-list">
                        <div class="index-OperationMaintenanceReasons-tooltip-list-key">${params[1].marker} ${params[1].seriesName}</div>
                        <div class="index-OperationMaintenanceReasons-tooltip-list-value">${params[1].value}</div>
                      </div>
                      <div class="index-OperationMaintenanceReasons-tooltip-list">
                        <div class="index-OperationMaintenanceReasons-tooltip-list-key">${params[2].marker} ${params[2].seriesName}</div>
                        <div class="index-OperationMaintenanceReasons-tooltip-list-value">${params[2].value}</div>
                      </div>
                    </div>`;

      return tooltipHtml;
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: true,
    data: ["5月", "6月", "7月", "8月", "9月", "10月", "11月"],
    axisLabel: {
      color: "#C2AA90",
      fontSize: 10,
    },
    axisTick: {
      alignWithLabel: true,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#7C6951",
      },
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      color: "#C2AA90",
      fontSize: 10,
    },
    splitLine: {
      lineStyle: {
        type: "dashed",
        color: "rgba(207,166,114,0.4)",
      },
    },
  },
  series: [
    {
      name: "探头损坏",
      type: "bar",
      stack: "one",
      barWidth: 8,
      data: [30, 40, 60, 80, 90, 100, 110],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#30DBE9" },
          { offset: 1, color: "#44F1B6" },
        ]),
      },
    },
    {
      name: "传感器损坏",
      type: "bar",
      stack: "one",
      barWidth: 8,
      data: [15, 25, 40, 50, 55, 60, 65],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#F1B86D" },
          { offset: 1, color: "#584536" },
        ]),
      },
    },
    {
      name: "其他",
      type: "bar",
      stack: "one",
      barWidth: 8,
      data: [10, 15, 20, 70, 75, 80, 85],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#4D5EF4" },
          { offset: 1, color: "#384C92" },
        ]),
      },
    },
  ],
};
//无数据
let optionWithoutData = {
  grid: {
    top: "10%",
    left: "0%",
    right: "0%",
    bottom: "0%",
    containLabel: true,
  },
  graphic: {
    elements: [
      {
        type: "text",
        left: "center",
        top: "middle",
        style: {
          text: "暂无数据",
          fill: "#999",
          fontSize: 14,
        },
      },
    ],
  },
};

const resizeHandler = () => {
  mapChart.resize();
};
const renderMap = () => {
  if (!mapChart) {
    mapChart = echarts.init(chartRef.value, null, {
      renderer: "svg",
    });
  }
  mapChart.dispatchAction({
    type: "restore",
  });
  mapChart.setOption(optionWithData);
  mapChart.dispatchAction({ type: "dataZoom", start: 0, end: 100 });
};
onMounted(() => {
  renderMap();
  window.addEventListener("resize", resizeHandler);
});
onUnmounted(() => {
  window.removeEventListener("resize", resizeHandler);
});
</script>

<style lang="scss">
.index-OperationMaintenanceReasons {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(98, 81, 55, 0.1);

  .index-OperationMaintenanceReasons-chart {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 12px;
  }

  .index-OperationMaintenanceReasons-tooltip {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1c1711 0%, #18150f 100%);
    box-shadow: 0px 2px 8px 0px rgba(235, 94, 18, 0.09);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #dda862;
    padding: 6px 10px;

    .index-OperationMaintenanceReasons-tooltip-title {
      font-weight: 600;
      font-size: 14px;
      color: #ecf8ff;
    }

    .index-OperationMaintenanceReasons-tooltip-list {
      display: flex;
      align-items: baseline;
      justify-content: space-between;

      .index-OperationMaintenanceReasons-tooltip-list-key {
        white-space: nowrap;
        font-size: 12px;
        color: rgba(236, 248, 255, 0.8);
      }

      .index-OperationMaintenanceReasons-tooltip-list-value {
        white-space: nowrap;
        margin-left: 30px;
        text-align: right;
        font-weight: 600;
        font-size: 12px;
        color: rgba(236, 248, 255, 0.8);
      }
    }
  }
}
</style>
